{% extends "base.html" %}
{% block title %}OPC参数配置{% endblock %}
{% block head %}
<style type="text/css">

</style>
{% endblock %}
{% block content %}
<div class="align-middle col-12 row">
    <h5 class="h2 d-inline">
        <span class="text-muted ">opc 参数配置</span>
    </h5>
</div>
<hr class="border-bottom border-danger"/>
<ul class="nav nav-pills" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="da-tab" data-toggle="tab" href="#opc_da" role="tab" aria-controls="da"
            aria-selected="true">OPC DA Client</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="ae-tab" data-toggle="tab" href="#opc_ae" role="tab" aria-controls="ae"
            aria-selected="false">OPC AE Client</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#server" role="tab" aria-controls="contact"
            aria-selected="false">OPC Server</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#modbus" role="tab" aria-controls="contact"
            aria-selected="false">Moubus</a>
    </li>
</ul>
<hr />
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="opc_da">
        <form action="{{ url_for('cs.load_opc_da') }}" method="post" id='opc_da' enctype="multipart/form-data"
            class="needs-validation" novalidate>
            <fieldset disabled id='opc_da_form'>
                {%for f in opc_da_form%}
                {%if f.name == 'csrf_token' %}
                <div class="form-group row">
                    <div class="col-sm-4">
                        {{f}}
                        <div class="invalid-feedback" style="width: 100%;">
                            Your username is required.
                        </div>
                    </div>
                </div>
                {%else%}
                <div class="form-group row">
                    {{f.label(class='col-sm-2 col-form-label col-form-label-md')}}
                    <div class="col-sm-4">
                        {{f(id=loop.index)}}
                    </div>
                    {{f.label(class='col-sm-2 col-form-label col-form-label-md')}}
                </div>
                {%endif%}
                {%endfor%}
            </fieldset>
            <div class="form-group row">
                <div class="col-sm-4  offset-2">
                    <button type="button" class="btn btn-info btn-block btn-md" id='edit_da'
                        onclick="edit_opc_da()">edit da</button>
                    <button type="submit" class="btn btn-primary d-none btn-block btn-md" id='save_da'
                        onclick="save_opc_da()">save da</button>
                    {{opc_da_form.save}}
                </div>
            </div>

        </form>
    </div>
    <div class="tab-pane fade" id="opc_ae">
        <form action="{{ url_for('cs.load_opc_ae') }}" method="post" id='opc_ae' class="needs-validation" novalidate>
            <fieldset disabled id='opc_ae_form'>
                {%for f in opc_ae_form%}
                {%if f.name == 'csrf_token' %}
                <div class="form-group row">
                    <div class="col-sm-4">
                        {{f(id = 'da1')}}
                    </div>
                </div>
                {%else%}
                <div class="form-group row">
                    {{f.label(class='col-sm-2 col-form-label col-form-label-md')}}
                    <div class="col-sm-4">
                        {{f}}
                    </div>
                    {{f.label(class='col-sm-2 col-form-label col-form-label-md')}}
                </div>
                {%endif%}
                {%endfor%}
            </fieldset>
            <div class="form-group row">
                <div class="col-sm-4  offset-2">
                    <button type="button" class="btn btn-info btn-block btn-md" id='edit_ae'
                        onclick="edit_opc_ae()">edit ae</button>
                    <button type="submit" class="btn btn-primary d-none btn-block btn-md" id='save_ae'
                        onclick="save_opc_ae()">save ae</button>
                    {{opc_ae_form.save}}
                </div>
            </div>

        </form>
    </div>
    <div class="tab-pane fade" id="server">...</div>
    <div class="tab-pane fade" id="modbus">...</div>
</div>


<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");


    function edit_opc_da() {
        var module_name = $("#module").val()
        alarms('开始编辑' + module_name)
        $("#edit_da").addClass("d-none");
        $("#save_da").removeClass("d-none");
        $("#opc_da_form").removeAttr("disabled");;

    }

    function save_opc_da() {
        $("#edit_da").removeClass("d-none");
        $("#save_da").addClass("d-none");
        $("#opc_da_form").addAttr("disabled");
    }

    function edit_opc_ae() {
        var module_name = $("#module").val()
        alarms('开始编辑' + module_name)
        $("#edit_ae").addClass("d-none");
        $("#save_ae").removeClass("d-none");
        $("#opc_ae_form").removeAttr("disabled");;

    }

    function save_opc_ae() {
        $("#edit_ae").removeClass("d-none");
        $("#save_ae").addClass("d-none");
        $("#opc_ae_form").addAttr("disabled");
    }


    $(document).ready(function () {

        $("#edit_da").click(function () {
            var module_name = $("#module").val()
            $.ajax({
                url: "{{url_for('cs.alter_module')}}",
                data: {
                    'module': module_name
                },
                type: 'get',
                dataType: 'json',
                success: success,
                error: function (data) {
                    console.log("请填写完全");
                },
            });
            return false;
        });
        $("#edit_ae").click(function () {
            var module_name = $("#module").val()
            $.ajax({
                url: "{{url_for('cs.alter_module')}}",
                data: {
                    'module': module_name
                },
                type: 'get',
                dataType: 'json',
                success: success,
                error: function (data) {
                    console.log("请填写完全");
                },
            });
            return false;
        });
    })

    function success(data) {
        console.log(data.basic_config)
        $('#main_server_ip').val(data.basic_config.main_server_ip)
        $('#main_server_prgid').val(data.basic_config.main_server_prgid)
        $('#main_server_clsid').val(data.basic_config.main_server_clsid)
        $('#main_server_domain').val(data.basic_config.main_server_domain)
        $('#main_server_user').val(data.basic_config.main_server_user)
        $('#main_server_password').val(data.basic_config.main_server_password)
        $('#back_server_ip').val(data.basic_config.back_server_ip)
        $('#bck_server_prgid').val(data.basic_config.bak_server_prgid)
        $('#bck_server_clsid').val(data.basic_config.bak_server_clsid)
        $('#bck_server_domain').val(data.basic_config.bak_server_domain)
        $('#bck_server_user').val(data.basic_config.bak_server_user)
        $('#bck_server_password').val(data.basic_config.bak_server_password)


    }
    (function () {
        'use strict'

        window.addEventListener('load',
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation')

                // Loop over them and prevent submission
                Array.prototype.filter.call(
                    forms,
                    function (form) {
                        form.addEventListener('submit',
                            function (event) {
                                if (form.checkValidity() === false) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }
                                form.classList.add('was-validated')
                            }, false)
                    })
            }, false)
    }())
</script>
{% endblock %}